<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getYearSetApi, saveYearSetApi } from '@/api/athlete'
import type { AthleteYearSet } from '@/api/athlete/types'
import dayjs from 'dayjs'

// 表单数据
const formData = ref<AthleteYearSet>({
	monthDayStart: '', // MM-DD格式
	monthDayEnd: '', // MM-DD格式
	yearStart: 1, // 1-当年, 2-次年
	yearEnd: 2 // 1-当年, 2-次年
})

const value = ref('')
// 获取当前年份和次年
const currentYear = new Date().getFullYear()
const nextYear = currentYear + 1

// 日期选择器默认显示日期
const defaultStartDate = computed(() => {
	return new Date(currentYear, 11, 1) // 当年12月1日
})

const defaultEndDate = computed(() => {
	console.log(new Date(nextYear, 0, 1))
	return new Date(nextYear, 0, 1) // 次年1月1日
})

// 年份选项
const yearOptions = [
	{
		label: `当年(${currentYear})`,
		value: 1
	},
	{
		label: `次年(${nextYear})`,
		value: 2
	}
]

// 加载状态
const loading = ref(false)
const saving = ref(false)

/**
 * 计算属性 - 将MM-DD格式和年份转换为完整日期
 */
const fullStartTime = computed(() => {
	return dayjs(formData.value.monthDayStart).format('YYYY-MM-DD')
})

const fullEndTime = computed(() => {
	return dayjs(formData.value.monthDayEnd).format('YYYY-MM-DD')
})

/**
 * 禁用开始日期选择器中非指定年份的日期
 */
const disabledStartDate = (time: Date) => {
	const targetYear = formData.value.yearStart === 1 ? currentYear : nextYear
	return time.getFullYear() !== targetYear
}

/**
 * 禁用结束日期选择器中非指定年份的日期
 */
const disabledEndDate = (time: Date) => {
	const targetYear = formData.value.yearEnd === 1 ? currentYear : nextYear
	return time.getFullYear() !== targetYear
}

/**
 * 加载配置
 */
const loadConfig = async () => {
	try {
		loading.value = true

		// 获取年度设置
		const response = await getYearSetApi()
		if (response.code === 200 && response.data) {
			formData.value = {
				...response.data,
				// 确保必要字段有默认值
				monthDayStart: currentYear + '-' + response.data.monthDayStart || '', // 格式化成今年的日期 YYYY-MM-DD
				monthDayEnd: nextYear + '-' + response.data.monthDayEnd || '', // 格式化成次年的日期 YYYY-MM-DD
				yearStart: response.data.yearStart || 1,
				yearEnd: response.data.yearEnd || 2
			}
		} else {
			// 没有配置时使用默认值
			formData.value = {
				monthDayStart: '',
				monthDayEnd: '',
				yearStart: 1,
				yearEnd: 2
			}
		}
	} catch (error) {
		console.error('加载配置失败:', error)
		// 出错时使用默认值
		formData.value = {
			monthDayStart: '',
			monthDayEnd: '',
			yearStart: 1,
			yearEnd: 2
		}
		ElMessage.error('加载配置失败')
	} finally {
		loading.value = false
	}
}

/**
 * 保存配置
 */
const saveConfig = async () => {
	try {
		// 验证表单
		if (!formData.value.monthDayStart || !formData.value.monthDayEnd) {
			ElMessage.error('请设置完整的时间段')
			return
		}

		// 二次确认
		await ElMessageBox.confirm(`确定要保存年度确认时间设置吗？`, '确认保存', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})

		saving.value = true

		// 保存配置
		await saveYearSetApi({
			yearStart: 1,
			yearEnd: 2,
			monthDayStart: dayjs(formData.value.monthDayStart).format('MM-DD'),
			monthDayEnd: dayjs(formData.value.monthDayEnd).format('MM-DD')
		})

		ElMessage.success('保存成功')
	} catch (error) {
		if (error !== 'cancel') {
			console.error('保存配置失败:', error)
			ElMessage.error('保存配置失败')
		}
	} finally {
		saving.value = false
	}
}

// 组件挂载时加载配置
onMounted(() => {
	loadConfig()
})
</script>

<template>
	<div class="p-5 overflow-y-auto">
		<!-- 页面标题 -->
		<div class="mb-6">
			<h2 class="text-lg font-600 text-primary mb-2">年度确认时间设置</h2>
			<p class="text-sm text-secondary">
				可设置年度确认的开放时间段，供用户选择开始时间、结束时间。超过该时间注册单位无法发出确认邀请。
			</p>
		</div>

		<!-- 配置表单 -->
		<div class="config-form bg-primary rounded-lg border border-background-tertiary p-6">
			<div
				v-loading="loading"
				class="form-content"
			>
				<div class="grid grid-cols-2 gap-6">
					<!-- 开始时间 -->
					<div>
						<div class="mb-2">年度确认开始时间：</div>
						<div class="flex items-center gap-2">
							<div class="w-60">
								<el-select
									v-model="formData.yearStart"
									placeholder="选择年份"
									:clearable="false"
									disabled
								>
									<el-option
										v-for="option in yearOptions"
										:key="option.value"
										:label="option.label"
										:value="option.value"
									/>
								</el-select>
							</div>

							<div class="flex-1">
								<el-date-picker
									v-model="formData.monthDayStart"
									type="date"
									placeholder="请选择月日"
									format="MM-DD"
									:clearable="true"
									:disabled-date="disabledStartDate"
									:default-value="defaultStartDate"
								/>
							</div>
						</div>
					</div>

					<!-- 结束时间 -->
					<div>
						<div class="mb-2">年度确认截止时间：</div>
						<div class="flex items-center gap-2">
							<div class="w-60">
								<el-select
									v-model="formData.yearEnd"
									disabled
									placeholder="选择年份"
									:clearable="false"
								>
									<el-option
										v-for="option in yearOptions"
										:key="option.value"
										:label="option.label"
										:value="option.value"
									/>
								</el-select>
							</div>

							<div class="flex-1">
								<el-date-picker
									v-model="formData.monthDayEnd"
									type="date"
									format="MM-DD"
									:disabled-date="disabledEndDate"
									:default-value="defaultEndDate"
								/>
							</div>
						</div>
					</div>
				</div>

				<!-- 当前状态提示 -->
				<div
					v-if="formData.monthDayStart && formData.monthDayEnd"
					class="status-tip mt-6"
				>
					<div class="mb-2 text-sm text-gray-600">
						<span>配置的完整时间段：{{ fullStartTime }} 至 {{ fullEndTime }}</span>
					</div>
				</div>

				<!-- 操作按钮 -->
				<div class="form-actions mt-8">
					<el-button
						type="primary"
						:loading="saving"
						:disabled="loading"
						@click="saveConfig"
					>
						保存设置
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
